<template>
  <div>
    <div class="page">
      <div class="head">
        <p class="search_box">
          <i class="iconfont icon-sousuo"></i>
          <input type="text" placeholder="搜索商品,共151477款好物" />
        </p>
      </div>
      <div class="classification_list">
        <nav class="classification_list_left">
          <li>
            <router-link
              v-for="(item, index) in list"
              :key="index"
              :to="{ name: 'list_id', params: { id: item.id } }"
            >
              {{ item.name }}
            </router-link>
          </li>
        </nav>
        <router-view></router-view>
      </div>
      <!-- `/category/${item.id}` -->
      <!-- <router-link to="/category/goods-list">进入商品列表页面</router-link> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },

  created() {
    axios
      .get(
        "/item/cateList.json?csrf_token=1e355578b4254da426007bb196e2cb92&__timestamp=1682671819782&categoryId="
      )

      .then((response) => {
        // 侧边栏数据
        this.list = response.data.data.categoryL1List;
        // console.log(this.list, "55555");
      });
  },
};
</script>

<style scoped>
a {
  list-style: none;
}
.head {
  height: 44px;
  border-bottom: 0.0133rem solid #aaa;
  display: flex;
  align-items: center;
}
.search_box {
  width: 345px;
  height: 28px;
  background-color: #ededed;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 20px;
}
.search_box input {
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.classification_list {
  display: flex;
  height: 100%;
}
.classification_list_left {
  width: 80px;
  height: 100%;
  border-right: 1px solid #aaa;
}
.classification_list_right {
  flex: 1;
}
.classification_list_left li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 425px;
  text-align: center;
}
.classification_list_left a {
  color: #333;
  line-height: 25px;
  width: 100%;
  font-size: 14px;
  /* margin: 0 auto; */
}
.classification_list_left .router-link-active {
  color: red;
  border-left: 3px solid red;
}
</style>
